<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育馆器材管理系统</title>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            background-color: #f4f4f9;
        }

        .header {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 30px;
            font-size: 2em;
        }

        .nav {
            background-color: #34495e;
            display: flex;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .nav button {
            background-color: transparent;
            border: none;
            color: white;
            padding: 15px 30px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 1em;
        }

        .nav button:hover {
            background-color: #2c3e50;
        }

        .nav button.active {
            background-color: #1abc9c;
        }

        .main {
            padding: 30px;
        }

        .tab-content {
            display: none;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: left;
        }

        th {
            background-color: #ecf0f1;
        }

        button {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 0.9em;
        }

        .add-btn {
            background-color: #27ae60;
            color: white;
        }

        .add-btn:hover {
            background-color: #2ecc71;
        }

        .edit-btn {
            background-color: #f39c12;
            color: white;
        }

        .edit-btn:hover {
            background-color: #f1c40f;
        }

        .delete-btn {
            background-color: #e74c3c;
            color: white;
        }

        .delete-btn:hover {
            background-color: #c0392b;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 30px;
            border: 1px solid #888;
            width: 40%;
            border-radius: 10px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 新增搜索框样式 */
        .search-container {
            margin-bottom: 20px;
        }

        .search-container input[type="text"] {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 70%;
        }

        .search-container button {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            background-color: #3498db;
            color: white;
            cursor: pointer;
        }

        .search-container button:hover {
            background-color: #2980b9;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>体育馆器材管理系统</h1>
    </div>
    <div class="nav">
        <button class="tablinks" onclick="openTab(event, 'Home')">首页</button>
        <button class="tablinks" onclick="openTab(event, 'EquipmentManagement')">器材信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'BorrowManagement')">器材借用管理</button>
        <button class="tablinks" onclick="openTab(event, 'MaintenanceManagement')">器材维护管理</button>
        <button class="tablinks" onclick="openTab(event, 'Statistics')">数据统计</button>
    </div>
    <div class="main">
        <div id="Home" class="tab-content">
            <h2>首页</h2>
            <p>欢迎使用体育馆器材管理系统，您可以通过顶部导航栏选择不同的功能模块进行操作。</p>
        </div>
        <div id="EquipmentManagement" class="tab-content">
            <h2>器材信息管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="equipmentSearch" placeholder="搜索器材名称">
                <button onclick="searchEquipments()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddEquipmentModal()">添加器材</button>
            <table id="equipmentTable">
                <thead>
                    <tr>
                        <th>器材名称</th>
                        <th>器材型号</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="BorrowManagement" class="tab-content">
            <h2>器材借用管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="borrowSearch" placeholder="搜索借用人员姓名或器材名称">
                <button onclick="searchBorrows()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddBorrowModal()">添加借用记录</button>
            <table id="borrowTable">
                <thead>
                    <tr>
                        <th>借用人员姓名</th>
                        <th>器材名称</th>
                        <th>借用时间</th>
                        <th>归还时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="MaintenanceManagement" class="tab-content">
            <h2>器材维护管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="maintenanceSearch" placeholder="搜索器材名称或维护人员姓名">
                <button onclick="searchMaintenances()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddMaintenanceModal()">添加维护记录</button>
            <table id="maintenanceTable">
                <thead>
                    <tr>
                        <th>器材名称</th>
                        <th>维护人员姓名</th>
                        <th>维护时间</th>
                        <th>维护内容</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="Statistics" class="tab-content">
            <h2>数据统计</h2>
            <p>器材总数: <span id="equipmentCount">0</span></p>
            <p>借用记录总数: <span id="borrowCount">0</span></p>
            <p>维护记录总数: <span id="maintenanceCount">0</span></p>
        </div>
    </div>

    <!-- 添加器材模态框 -->
    <div id="addEquipmentModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddEquipmentModal()">&times;</span>
            <h3>添加/修改器材</h3>
            <label for="equipmentName">器材名称:</label>
            <input type="text" id="equipmentName" placeholder="请输入器材名称">
            <br>
            <label for="equipmentModel">器材型号:</label>
            <input type="text" id="equipmentModel" placeholder="请输入器材型号">
            <br>
            <label for="equipmentQuantity">数量:</label>
            <input type="number" id="equipmentQuantity" placeholder="请输入数量">
            <br>
            <button onclick="saveEquipment()">保存</button>
        </div>
    </div>

    <!-- 添加借用记录模态框 -->
    <div id="addBorrowModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddBorrowModal()">&times;</span>
            <h3>添加/修改借用记录</h3>
            <label for="borrowPerson">借用人员姓名:</label>
            <input type="text" id="borrowPerson" placeholder="请输入借用人员姓名">
            <br>
            <label for="borrowEquipment">器材名称:</label>
            <input type="text" id="borrowEquipment" placeholder="请输入器材名称">
            <br>
            <label for="borrowTime">借用时间:</label>
            <input type="text" id="borrowTime" placeholder="请输入借用时间">
            <br>
            <label for="returnTime">归还时间:</label>
            <input type="text" id="returnTime" placeholder="请输入归还时间">
            <br>
            <button onclick="saveBorrow()">保存</button>
        </div>
    </div>

    <!-- 添加维护记录模态框 -->
    <div id="addMaintenanceModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddMaintenanceModal()">&times;</span>
            <h3>添加/修改维护记录</h3>
            <label for="maintenanceEquipment">器材名称:</label>
            <input type="text" id="maintenanceEquipment" placeholder="请输入器材名称">
            <br>
            <label for="maintenancePerson">维护人员姓名:</label>
            <input type="text" id="maintenancePerson" placeholder="请输入维护人员姓名">
            <br>
            <label for="maintenanceTime">维护时间:</label>
            <input type="text" id="maintenanceTime" placeholder="请输入维护时间">
            <br>
            <label for="maintenanceContent">维护内容:</label>
            <textarea id="maintenanceContent" placeholder="请输入维护内容"></textarea>
            <br>
            <button onclick="saveMaintenance()">保存</button>
        </div>
    </div>

    <script>
        // 初始化表格
        function initTables() {
            // 器材管理
            let equipments = JSON.parse(localStorage.getItem('equipments')) || [
                { name: '篮球', model: 'XXL-1', quantity: 20 },
                { name: '足球', model: 'M-2', quantity: 15 },
                { name: '乒乓球拍', model: 'S-3', quantity: 30 },
                { name: '羽毛球拍', model: 'L-4', quantity: 25 },
                { name: '哑铃', model: '50KG', quantity: 10 },
                { name: '跑步机', model: 'PRO-5', quantity: 5 },
                { name: '健身单车', model: 'CYCLE-6', quantity: 8 },
                { name: '排球', model: 'XL-7', quantity: 12 },
                { name: '网球拍', model: 'T-8', quantity: 18 },
                { name: '杠铃', model: '100KG', quantity: 6 }
            ];
            localStorage.setItem('equipments', JSON.stringify(equipments));
            let equipmentTable = document.getElementById('equipmentTable').getElementsByTagName('tbody')[0];
            equipmentTable.innerHTML = '';
            equipments.forEach((equipment, index) => {
                let row = equipmentTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = equipment.name;
                cell2.innerHTML = equipment.model;
                cell3.innerHTML = equipment.quantity;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditEquipmentModal(${index})">编辑</button><button class="delete-btn" onclick="deleteEquipment(${index})">删除</button>`;
            });

            // 借用管理
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [
                { person: '张三', equipment: '篮球', borrowTime: '2025-03-20', returnTime: '2025-03-25' },
                { person: '李四', equipment: '足球', borrowTime: '2025-03-22', returnTime: '2025-03-27' },
                { person: '王五', equipment: '乒乓球拍', borrowTime: '2025-03-24', returnTime: '2025-03-29' },
                { person: '赵六', equipment: '羽毛球拍', borrowTime: '2025-03-26', returnTime: '2025-03-31' },
                { person: '孙七', equipment: '哑铃', borrowTime: '2025-03-28', returnTime: '2025-04-02' },
                { person: '周八', equipment: '跑步机', borrowTime: '2025-03-30', returnTime: '2025-04-04' },
                { person: '吴九', equipment: '健身单车', borrowTime: '2025-04-01', returnTime: '2025-04-06' },
                { person: '郑十', equipment: '排球', borrowTime: '2025-04-03', returnTime: '2025-04-08' },
                { person: '王十一', equipment: '网球拍', borrowTime: '2025-04-05', returnTime: '2025-04-10' },
                { person: '李十二', equipment: '杠铃', borrowTime: '2025-04-07', returnTime: '2025-04-12' }
            ];
            localStorage.setItem('borrows', JSON.stringify(borrows));
            let borrowTable = document.getElementById('borrowTable').getElementsByTagName('tbody')[0];
            borrowTable.innerHTML = '';
            borrows.forEach((borrow, index) => {
                let row = borrowTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = borrow.person;
                cell2.innerHTML = borrow.equipment;
                cell3.innerHTML = borrow.borrowTime;
                cell4.innerHTML = borrow.returnTime;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditBorrowModal(${index})">编辑</button><button class="delete-btn" onclick="deleteBorrow(${index})">删除</button>`;
            });

            // 维护管理
            let maintenances = JSON.parse(localStorage.getItem('maintenances')) || [
                { equipment: '篮球', person: '张师傅', time: '2025-03-21', content: '检查篮球气压' },
                { equipment: '足球', person: '李师傅', time: '2025-03-23', content: '更换足球气门芯' },
                { equipment: '乒乓球拍', person: '王师傅', time: '2025-03-25', content: '更换乒乓球拍胶皮' },
                { equipment: '羽毛球拍', person: '赵师傅', time: '2025-03-27', content: '检查羽毛球拍线' },
                { equipment: '哑铃', person: '孙师傅', time: '2025-03-29', content: '紧固哑铃螺母' },
                { equipment: '跑步机', person: '周师傅', time: '2025-03-31', content: '清洁跑步机皮带' },
                { equipment: '健身单车', person: '吴师傅', time: '2025-04-02', content: '调整健身单车阻力' },
                { equipment: '排球', person: '郑师傅', time: '2025-04-04', content: '修补排球外皮' },
                { equipment: '网球拍', person: '王师傅', time: '2025-04-06', content: '更换网球拍握把皮' },
                { equipment: '杠铃', person: '李师傅', time: '2025-04-08', content: '检查杠铃杆磨损情况' }
            ];
            localStorage.setItem('maintenances', JSON.stringify(maintenances));
            let maintenanceTable = document.getElementById('maintenanceTable').getElementsByTagName('tbody')[0];
            maintenanceTable.innerHTML = '';
            maintenances.forEach((maintenance, index) => {
                let row = maintenanceTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = maintenance.equipment;
                cell2.innerHTML = maintenance.person;
                cell3.innerHTML = maintenance.time;
                cell4.innerHTML = maintenance.content;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditMaintenanceModal(${index})">编辑</button><button class="delete-btn" onclick="deleteMaintenance(${index})">删除</button>`;
            });

            // 更新数据统计
            document.getElementById('equipmentCount').textContent = equipments.length;
            document.getElementById('borrowCount').textContent = borrows.length;
            document.getElementById('maintenanceCount').textContent = maintenances.length;
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tab-content');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tablinks');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 器材管理
        let currentEquipmentIndex = null;

        function openAddEquipmentModal() {
            currentEquipmentIndex = null;
            document.getElementById('equipmentName').value = '';
            document.getElementById('equipmentModel').value = '';
            document.getElementById('equipmentQuantity').value = '';
            document.getElementById('addEquipmentModal').style.display = 'block';
        }

        function openEditEquipmentModal(index) {
            currentEquipmentIndex = index;
            let equipments = JSON.parse(localStorage.getItem('equipments')) || [];
            let equipment = equipments[index];
            document.getElementById('equipmentName').value = equipment.name;
            document.getElementById('equipmentModel').value = equipment.model;
            document.getElementById('equipmentQuantity').value = equipment.quantity;
            document.getElementById('addEquipmentModal').style.display = 'block';
        }

        function closeAddEquipmentModal() {
            document.getElementById('addEquipmentModal').style.display = 'none';
        }

        function saveEquipment() {
            let equipments = JSON.parse(localStorage.getItem('equipments')) || [];
            let name = document.getElementById('equipmentName').value;
            let model = document.getElementById('equipmentModel').value;
            let quantity = parseInt(document.getElementById('equipmentQuantity').value);
            if (name && model &&!isNaN(quantity)) {
                if (currentEquipmentIndex!== null) {
                    equipments[currentEquipmentIndex] = { name, model, quantity };
                } else {
                    equipments.push({ name, model, quantity });
                }
                localStorage.setItem('equipments', JSON.stringify(equipments));
                initTables();
                closeAddEquipmentModal();
            }
        }

        function deleteEquipment(index) {
            let equipments = JSON.parse(localStorage.getItem('equipments')) || [];
            equipments.splice(index, 1);
            localStorage.setItem('equipments', JSON.stringify(equipments));
            initTables();
        }

        // 借用管理
        let currentBorrowIndex = null;

        function openAddBorrowModal() {
            currentBorrowIndex = null;
            document.getElementById('borrowPerson').value = '';
            document.getElementById('borrowEquipment').value = '';
            document.getElementById('borrowTime').value = '';
            document.getElementById('returnTime').value = '';
            document.getElementById('addBorrowModal').style.display = 'block';
        }

        function openEditBorrowModal(index) {
            currentBorrowIndex = index;
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [];
            let borrow = borrows[index];
            document.getElementById('borrowPerson').value = borrow.person;
            document.getElementById('borrowEquipment').value = borrow.equipment;
            document.getElementById('borrowTime').value = borrow.borrowTime;
            document.getElementById('returnTime').value = borrow.returnTime;
            document.getElementById('addBorrowModal').style.display = 'block';
        }

        function closeAddBorrowModal() {
            document.getElementById('addBorrowModal').style.display = 'none';
        }

        function saveBorrow() {
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [];
            let person = document.getElementById('borrowPerson').value;
            let equipment = document.getElementById('borrowEquipment').value;
            let borrowTime = document.getElementById('borrowTime').value;
            let returnTime = document.getElementById('returnTime').value;
            if (person && equipment && borrowTime && returnTime) {
                if (currentBorrowIndex!== null) {
                    borrows[currentBorrowIndex] = { person, equipment, borrowTime, returnTime };
                } else {
                    borrows.push({ person, equipment, borrowTime, returnTime });
                }
                localStorage.setItem('borrows', JSON.stringify(borrows));
                initTables();
                closeAddBorrowModal();
            }
        }

        function deleteBorrow(index) {
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [];
            borrows.splice(index, 1);
            localStorage.setItem('borrows', JSON.stringify(borrows));
            initTables();
        }

        // 维护管理
        let currentMaintenanceIndex = null;

        function openAddMaintenanceModal() {
            currentMaintenanceIndex = null;
            document.getElementById('maintenanceEquipment').value = '';
            document.getElementById('maintenancePerson').value = '';
            document.getElementById('maintenanceTime').value = '';
            document.getElementById('maintenanceContent').value = '';
            document.getElementById('addMaintenanceModal').style.display = 'block';
        }

        function openEditMaintenanceModal(index) {
            currentMaintenanceIndex = index;
            let maintenances = JSON.parse(localStorage.getItem('maintenances')) || [];
            let maintenance = maintenances[index];
            document.getElementById('maintenanceEquipment').value = maintenance.equipment;
            document.getElementById('maintenancePerson').value = maintenance.person;
            document.getElementById('maintenanceTime').value = maintenance.time;
            document.getElementById('maintenanceContent').value = maintenance.content;
            document.getElementById('addMaintenanceModal').style.display = 'block';
        }

        function closeAddMaintenanceModal() {
            document.getElementById('addMaintenanceModal').style.display = 'none';
        }

        function saveMaintenance() {
            let maintenances = JSON.parse(localStorage.getItem('maintenances')) || [];
            let equipment = document.getElementById('maintenanceEquipment').value;
            let person = document.getElementById('maintenancePerson').value;
            let time = document.getElementById('maintenanceTime').value;
            let content = document.getElementById('maintenanceContent').value;
            if (equipment && person && time && content) {
                if (currentMaintenanceIndex!== null) {
                    maintenances[currentMaintenanceIndex] = { equipment, person, time, content };
                } else {
                    maintenances.push({ equipment, person, time, content });
                }
                localStorage.setItem('maintenances', JSON.stringify(maintenances));
                initTables();
                closeAddMaintenanceModal();
            }
        }

        function deleteMaintenance(index) {
            let maintenances = JSON.parse(localStorage.getItem('maintenances')) || [];
            maintenances.splice(index, 1);
            localStorage.setItem('maintenances', JSON.stringify(maintenances));
            initTables();
        }

        // 搜索器材
        function searchEquipments() {
            let searchTerm = document.getElementById('equipmentSearch').value.toLowerCase();
            let equipments = JSON.parse(localStorage.getItem('equipments')) || [];
            let equipmentTable = document.getElementById('equipmentTable').getElementsByTagName('tbody')[0];
            equipmentTable.innerHTML = '';
            equipments.forEach((equipment, index) => {
                if (equipment.name.toLowerCase().includes(searchTerm)) {
                    let row = equipmentTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = equipment.name;
                    cell2.innerHTML = equipment.model;
                    cell3.innerHTML = equipment.quantity;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditEquipmentModal(${index})">编辑</button><button class="delete-btn" onclick="deleteEquipment(${index})">删除</button>`;
                }
            });
        }

        // 搜索借用记录
        function searchBorrows() {
            let searchTerm = document.getElementById('borrowSearch').value.toLowerCase();
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [];
            let borrowTable = document.getElementById('borrowTable').getElementsByTagName('tbody')[0];
            borrowTable.innerHTML = '';
            borrows.forEach((borrow, index) => {
                if (borrow.person.toLowerCase().includes(searchTerm) || borrow.equipment.toLowerCase().includes(searchTerm)) {
                    let row = borrowTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    let cell5 = row.insertCell(4);
                    cell1.innerHTML = borrow.person;
                    cell2.innerHTML = borrow.equipment;
                    cell3.innerHTML = borrow.borrowTime;
                    cell4.innerHTML = borrow.returnTime;
                    cell5.innerHTML = `<button class="edit-btn" onclick="openEditBorrowModal(${index})">编辑</button><button class="delete-btn" onclick="deleteBorrow(${index})">删除</button>`;
                }
            });
        }

        // 搜索维护记录
        function searchMaintenances() {
            let searchTerm = document.getElementById('maintenanceSearch').value.toLowerCase();
            let maintenances = JSON.parse(localStorage.getItem('maintenances')) || [];
            let maintenanceTable = document.getElementById('maintenanceTable').getElementsByTagName('tbody')[0];
            maintenanceTable.innerHTML = '';
            maintenances.forEach((maintenance, index) => {
                if (maintenance.equipment.toLowerCase().includes(searchTerm) || maintenance.person.toLowerCase().includes(searchTerm)) {
                    let row = maintenanceTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    let cell5 = row.insertCell(4);
                    cell1.innerHTML = maintenance.equipment;
                    cell2.innerHTML = maintenance.person;
                    cell3.innerHTML = maintenance.time;
                    cell4.innerHTML = maintenance.content;
                    cell5.innerHTML = `<button class="edit-btn" onclick="openEditMaintenanceModal(${index})">编辑</button><button class="delete-btn" onclick="deleteMaintenance(${index})">删除</button>`;
                }
            });
        }

        // 页面加载完成后初始化表格
        window.onload = function () {
            initTables();
        };
    </script>
</body>

</html>